<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="分类">
      <el-select v-model="formInline.category" placeholder="Activity zone">
        <el-option
          v-for="item in category"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="关键字">
      <el-input v-model="formInline.search" placeholder="Approved by" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">Query</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="proname" label="商品名称" width="200" />
    <el-table-column label="商品图片">
      <template #default="scope">
        <img :src="scope.row.img1" alt="" style="width: 100%" />
      </template>
    </el-table-column>
    <el-table-column prop="category" label="商品分类" />
    <el-table-column prop="brand" label="商品品牌" />
    <el-table-column prop="originprice" label="商品价格" />
    <el-table-column prop="discount" label="商品折扣" />
    <el-table-column prop="stock" label="商品库存" />
    <el-table-column label="是否售卖">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否推荐">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isrecommend"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="是否秒杀">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isseckill"
          :active-value="1"
          :inactive-value="0"
        />
      </template>
    </el-table-column>
    <el-table-column label="操作" width="200">
      <template #default="scope">
        <el-button @click="editopen(scope.row)">编辑</el-button>
        <el-button type="danger">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-model:current-page="count"
    v-model:page-size="limitNum"
    :page-sizes="[10, 20, 30, 40]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <el-dialog v-model="dialogVisible" title="Tips" width="30%">
    <el-form>
      <el-form-item label="商品名称">
        <el-input v-model="editForm.proname" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref, watchEffect, reactive } from "vue";
import { proListApi, proSearchApi, getCategoryApi } from "@/api/pro";

interface RowType {
  proname: string;
  [propname: string]: any;
}

const tableData = ref<RowType[]>([]);

// 第几页
const count = ref<number>(1);
// 每页条数
const limitNum = ref<number>(10);
// 总条数
const total = ref<number>(0);

// const getData = async () => {
//   const res: any = await proListApi({
//     // 可选参数count第几页，limitNum表示每页几条
//     count: count.value,
//     limitNum: limitNum.value,
//   });
//   if (res) {
//     console.log(res);
//     tableData.value = res.data;
//     total.value = res.total;
//   }
// };

// onMounted(async () => {
//   getData();
// });

// watch(
//   count,
//   () => {
//     getData();
//   },
//   {
//     immediate: true,
//   }
// );

watchEffect(async () => {
  const res: any = await proListApi({
    // 可选参数count第几页，limitNum表示每页几条
    count: count.value,
    limitNum: limitNum.value,
  });
  if (res) {
    // console.log(res);
    tableData.value = res.data;
    total.value = res.total;
  }
});

const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
  limitNum.value = val;
};
const handleCurrentChange = (val: number) => {
  count.value = val;
  // getData();
};

// 搜索字段
const formInline = reactive({
  category: "",
  search: "",
});

// 分类数据
const category = ref([]);
onMounted(async () => {
  const res = await getCategoryApi();
  res && (category.value = res.data);
});
const search = async () => {
  // console.log(formInline);
  const res = await proSearchApi(formInline);
  console.log(res);
};

// 编辑功能
const dialogVisible = ref<boolean>(false);
const editForm = reactive({
  proname: "",
});

const editopen = (row: RowType) => {
  console.log(row);
  dialogVisible.value = true;
  editForm.proname = row.proname;
};

// data() {
//   return {
//     editForm: {}
//   }
// },
// methods: {
//   editopen(row) {
//     this.editForm = [...row];
//   }
// }
</script>

<style lang="less">
.el-pagination {
  padding: 20px 0;
  background-color: #fff;
  justify-content: flex-end;
}
</style>
